﻿/// <reference path="libs/jquery-2.0.2.js" />

var nextFigField = {
    render: function () {
        $figField = $("<div id='fig_field'></div>").appendTo("div#container");
        $figField.css({
            'background-color': '#eee', 'width': '122px', 'height': '122px',
            'border': '2px outset grey', 'top': '10px', 'left': '500px', 'position': 'absolute'
        });
        $figField.corner("round 10px");
    }
};

var nextFig = {
        // Shape colors
        colors: ['#eaeaea', '#ff6600', '#eec900', '#0000ff',
                    '#cc00ff', '#00ff00', '#66ccff', '#ff0000'],

        render: function () {
            $nextFig = $("<div id='next_symbol'></div>").appendTo("div#fig_field");

            //TODO  - implement next figure;
            if (createdFigure == "angle") {
                $nextFig.css({'background-color': 'blue', 'width':'80px', 'height':'80px',
                    'position': 'absolute', 'left': '20px', 'top': '20px'
                });
            }
        }
};

var statistics = {
    init: function () {
        $stats = $("<div id='stats'></div>").appendTo("div#container");
       
        $scoreRes = $("<div id ='score'>Score: "+ currentScore +"</div>").appendTo("div#stats");
        $scoreRes.css({
            'font-family': 'Segoe UI','font-size': '120%', 'width': '7em',
            'top': '150px', 'left': '500px', 'position': 'absolute'
            });
    }
};

var startBtn = {
    init: function () {
        $cmd = $("<div id='cmd'></div>").appendTo("div#container");

        $startBtn = $("<input id='start' type='button' value='Start'/>").appendTo("div#cmd");
        $startBtn.css({
            'font-family': 'Segoe UI', 'border-radius':'10px',
            'font-size': '14px','padding': '3px 14px','cursor':'pointer',
            'top': '190px', 'left': '500px', 'position': 'absolute',
            'text-decoration': 'none', 'border': '1px outset grey', 'width':'70px'
        });

        $startBtn.on("mouseover", function () {
            $(this).css({"background-color": "#077eed", "color":"white"});
        });
        $startBtn.on("mouseout", function () {
            $(this).css({"background-color": "#eee","color": "black"});
        });
    },
    start: function () {
        $('#start').val('Pause').click(startBtn.pause);
    },
    pause: function () {
        $('#start').val('Resume').click(startBtn.resume);
    },
    resume: function () {
        $('#start').val('Pause').click(startBtn.pause);
    }
};

var stopBtn = {
    init: function () {
        $stopBtn = $("<input id='stop' type='button' value='Stop'/>").appendTo("div#cmd");
        $stopBtn.css({
            'font-family': 'Segoe UI', 'border': '1px outset grey',
            'font-size': '14px', 'padding': '3px 6px', 'cursor': 'pointer',
            'top': '190px', 'left': '580px', 'position': 'absolute',
            'border-radius': '10px','width':'50px'
        });

        $stopBtn.on("mouseover", function () {
            $(this).css({ "background-color": "#077eed", "color": "white" });
        });
        $stopBtn.on("mouseout", function () {
            $(this).css({ "background-color": "#eee", "color": "black" });
        });
    },
    stop: function () {
        $('#start').val('Start').click(startBtn.pause);
    }   
};

var controls = {
        init: function () {
            $controlsInfo = $("<div id='info'></div>").appendTo("div#container");
            $controlsInfo.html('<div>Move left: A</div><div>Move right: D</div><div>Rotate: Space</div>');
            $controlsInfo.css({
                'font-family': 'Segoe UI', 'font-size': '14px', 
                'top': '230px', 'left': '500px', 'position': 'absolute'
            });
        },
};

// Everything starts here
$(window).load(function () {
    nextFigField.render();
    nextFig.render();
    statistics.init();
    startBtn.init();
    stopBtn.init();
    $('#start').click(startBtn.start);
    $('#stop').click(stopBtn.stop);
    controls.init();
});